<template>
    <div class="content">
        <MonitorSearch @handle-btn="handleBtn" ref="risk-search" />
        <el-row>
            <div v-if="showPublic" class="report">
                <div class="title">
                    <span class="hd">公募模块</span>
                </div>
                <div class="left-part">
                    <div class="left-part-1">
                        <span>剩余期限</span>
                        <RiskTableP
                            :tableConfig="tableConfigExtra"
                            :tableData="tableDataExtra"
                            :column="tableColumnsExtra"
                            :paging="pagingExtra"
                            @page-change="getTableDataExtra"
                            :noshowPaging="pagingExtra.total < 5"
                        >
                            <template #calculateValue120="scope">
                                <span
                                    :style="{
                                        textDecoration: 'underline',
                                        textDecorationColor: ThresholadEntryColor[scope.row.thresholdType120],
                                        color: ThresholadEntryColor[scope.row.thresholdType120],
                                        cursor: 'pointer',
                                    }"
                                    @click="openEntryResultDetail('extra', { entryCode: scope.row.entryCode120, fundCode: scope.row.fundCode })"
                                >
                                    {{ numberFormat(scope.row.calculateValue120) }}
                                </span>
                            </template>
                            <template #calculateValue240="scope">
                                <span
                                    :style="{
                                        textDecoration: 'underline',
                                        textDecorationColor: ThresholadEntryColor[scope.row.thresholdType240],
                                        color: ThresholadEntryColor[scope.row.thresholdType240],
                                        cursor: 'pointer',
                                    }"
                                    @click="openEntryResultDetail('extra', { entryCode: scope.row.entryCode240, fundCode: scope.row.fundCode })"
                                >
                                    {{ numberFormat(scope.row.calculateValue240) }}
                                </span>
                            </template>
                        </RiskTableP>
                    </div>
                    <div class="left-part-2">
                        <span>现金比例</span>
                        <RiskTableP
                            :tableConfig="tableConfigScale"
                            :tableData="tableDataScale"
                            :column="tableColumnsScale"
                            @cell-click="handleCellClickScaleDetail"
                        >
                        </RiskTableP>
                    </div>
                    <div class="left-part-3">
                        <span>现金比例明细</span>
                        <RiskTableP
                            :tableConfig="tableConfigScaleDetail"
                            :tableData="tableDataScaleDetail"
                            :column="tableColumnsScaleDetail"
                            :paging="pagingScaleDetail"
                            :searchParams="searchParamsScaleDetail"
                            @page-change="getTableDataScaleDetail"
                            :noshowPaging="pagingScaleDetail.total < 5"
                            :key="tableKey + 'scale-detail'"
                        >
                            <template #calculateValue="scope">
                                <span
                                    :style="{
                                        textDecoration: 'underline',
                                        textDecorationColor: ThresholadEntryColor[scope.row.thresholdType],
                                        color: ThresholadEntryColor[scope.row.thresholdType],
                                        cursor: 'pointer',
                                    }"
                                    @click="openEntryResultDetail('scale-detail', scope.row)"
                                >
                                    {{ numberFormat(scope.row.calculateValue) }}
                                </span>
                            </template>
                        </RiskTableP>
                    </div>
                </div>
            </div>

            <div style="margin-left: 10px" class="report" :style="{ width: showPublic ? '50%' : '100%' }">
                <div class="title">
                    <span class="hd">自定义模块</span>
                </div>

                <div class="right-part">
                    <span> 条目明细 </span>
                    <RiskTableP
                        :tableConfig="tableConfigEntryDetail"
                        :tableData="tableDataEntryDetail"
                        :column="tableColumnsEntryDetail"
                        :paging="pagingEntryDetail"
                        :searchParams="searchParamsEntryDetail"
                        @page-change="getTableDataEntryDetail"
                        :key="tableKey + 'entry-detail'"
                    >
                        <template #calculateValue="scope">
                            <span
                                :style="{
                                    textDecoration: 'underline',
                                    textDecorationColor: ThresholadEntryColor[scope.row.thresholdType],
                                    color: ThresholadEntryColor[scope.row.thresholdType],
                                    cursor: 'pointer',
                                }"
                                @click="openEntryResultDetail('entry-result', scope.row)"
                            >
                                {{ numberFormat(scope.row.calculateValue) }}
                            </span>
                        </template>

                        <template #fundNameSt="scope">
                            <!-- <el-popover
                                v-if="scope.row.fundNames && scope.row.fundNames.length > 1"
                                placement="right"
                                trigger="hover"
                                :visible-arrow="false"
                            >
                                <div style="padding: 0 10px 10px 0" slot v-for="(ele, index) in scope.row.fundNames" :key="index">
                                    {{ ele }}
                                </div>
                                <el-tag slot="reference" style="background: #f1e9e2; color: #bf9181" size="small">
                                    {{ getObjectLength(scope.row.fundNames) + '个产品' }}
                                </el-tag>
                            </el-popover> -->
                            <span v-if="scope.row.fundNames && scope.row.fundNames.length > 1">无</span>
                            <!-- <span v-else-if="scope.row.fundNames && scope.row.fundNames.length === 1">无</span> -->
                            <span v-else>{{ scope.row.fundNameSt }}</span>
                        </template>

                        <template #entryName="scope">
                            <span @click="handleRowClick(scope.row)" class="text-hover">
                                {{ scope.row.entryName }}
                            </span>
                        </template>
                    </RiskTableP>
                </div>
            </div>
        </el-row>
    </div>
</template>
<script lang="ts">
import RiskTableP from '@/common/components/risk-table-plus.vue';
import RiskEmitter from '@/common/mixis/risk-emitter.vue';
import { PageVO, TableConfigVO } from '@/common/vo';
import { numberFormat } from '@/utils/tools';
import { mixins } from 'vue-class-component';
import { Component, Vue } from 'vue-property-decorator';
import { queryDetail, queryMonitorMaturity, queryMonitorRatio, isInvestmentManager } from './api/item-real-time-monitoring';
import MonitorSearch from './monitor-search.vue';

@Component({ name: 'DataStatistics', components: { MonitorSearch, RiskTableP } })
export default class DataStatistics extends mixins(RiskEmitter) {
    numberFormat = numberFormat;

    // 根据角色是否显示公募
    showPublic: boolean = true;

    tableConfigExtra: TableConfigVO = {
        rowKey: 'fundCode', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableDataExtra: any[] = [
        {
            fundCode: '1',
            fundNameSt: '天添利',
            calculateValue120: '121.36',
            calculateValue240: '147.87',
            thresholdType120: '3',
            thresholdType240: '1',
            entryCode120: 'YH12',
            entryCode240: 'YH24',
        },
        {
            fundCode: '2',
            fundNameSt: '招商证券产品1',
            calculateValue120: '121.36',
            calculateValue240: '147.87',
            thresholdType120: '3',
            thresholdType240: '1',
            entryCode120: 'YH12',
            entryCode240: 'YH24',
        },
    ];
    tableColumnsExtra = [
        {
            field: 'fundNameSt',
            minWidth: 100,
        },
        {
            title: '平均剩余期限不超过120天',
            field: 'calculateValue120',
            minWidth: 180,
            align: 'center',
        },
        {
            title: '平均剩余存续期限不超过240天',
            field: 'calculateValue240',
            minWidth: 180,
            align: 'center',
        },
    ];
    pagingExtra: PageVO = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
    };

    getTableDataExtra() {
        let params = this.getRequestParams('risk-search');

        queryMonitorMaturity(params).then(res => {
            this.tableDataExtra = res.list;
            this.pagingExtra.total = res.total;
        });
    }

    tableConfigScale: TableConfigVO = {
        rowKey: 'id', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableDataScale: any[] = [
        {
            type: '产品数量',
            five: 2,
            fiveToSix: 4,
            sixToEight: 5,
            eightTo: 10,
        },
        {
            type: '产品占比',
            five: '2%',
            fiveToSix: '4',
            sixToEight: '5%',
            eightTo: '10%',
        },
    ];
    tableColumnsScale = [
        {
            field: 'type',
            width: '100',
        },
        {
            title: '<5%',
            field: 'five',
        },
        {
            title: '[5%,6%)',
            field: 'fiveToSix',
        },
        {
            title: '[6%,8%)',
            field: 'sixToEight',
        },
        {
            title: '≥8%',
            field: 'eightTo',
        },
    ];

    getTableDataScale() {
        let params = this.getRequestParams('risk-search');
        queryMonitorRatio(params).then(res => {
            this.tableDataScale = [
                {
                    id: '1',
                    type: '产品数量',
                    five: res.fiveCount,
                    fiveToSix: res.fiveToSixCount,
                    sixToEight: res.sixToEightCount,
                    eightTo: res.eightToCount,
                },
                {
                    id: '2',
                    type: '产品占比',
                    five: res.fivePercent,
                    fiveToSix: res.fiveToSixPercent,
                    sixToEight: res.sixToEightPercent,
                    eightTo: res.eightPercent,
                },
            ];
        });
    }

    tableConfigScaleDetail: TableConfigVO = {
        rowKey: 'resultId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableDataScaleDetail: any[] = [];
    tableColumnsScaleDetail = [
        {
            title: '产品编码',
            field: 'fundCode',
            filterType: 'search',
            filters: [{ data: '' }],
            width: '140',
        },
        {
            title: '产品名称',
            field: 'fundNameSt',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '160',
        },
        {
            title: '实际值',
            field: 'calculateValue',
            width: '120',
        },
    ];
    pagingScaleDetail: PageVO = {
        currentPage: 1,
        pageSize: 10,
        total: 0,
    };
    tableKey: number = 0; // 用于重置表头条件

    getTableDataScaleDetail() {
        let params = this.getRequestParams('risk-search');
        queryDetail({ ...params, ...this.searchParamsScaleDetail, paging: this.pagingScaleDetail, entryCodes: ['YH46', 'YH558'] }).then(
            (res: any) => {
                this.tableDataScaleDetail = res.list;
                this.pagingScaleDetail.total = res.total;
            }
        );
    }

    tableConfigEntryDetail: TableConfigVO = {
        rowKey: 'resultId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    tableDataEntryDetail: any[] = [
        {
            entryCode: '80001X',
            entryName: '【现金管理产品运作管理指引】全部产品和货币基金投资同一商业银行的银行存款及其发行的同业存单与债券、已该金融机构为交易对手的逆',
            fundCode: '001',
            fundNameSt: '招商证券产品1',
            compareType: '0',
            thresholdValue: '0.89',
            calculateValue: 0.12,
            thresholdType: '3',
        },
        {
            entryCode: '80001X',
            entryName: '【现金管理产品运作管理指引】全部产品和货币基金投资同一商业银行的银行存款及其发行的同业存单与债券、已该金融机构为交易对手的逆',
            fundCode: '002',
            fundNameSt: '招商证券产品1',
            compareType: '0',
            thresholdValue: '0.89',
            calculateValue: 0.12,
            thresholdType: '3',
        },
        {
            entryCode: '80001X',
            entryName: '【现金管理产品运作管理指引】全部产品和货币基金投资同一商业银行的银行存款及其发行的同业存单与债券、已该金融机构为交易对手的逆',
            fundCode: '003',
            fundNameSt: '招商证券产品1',
            compareType: '0',
            thresholdValue: '0.89',
            calculateValue: 0.12,
            thresholdType: '2',
        },
    ];
    tableColumnsEntryDetail = [
        {
            title: '条目编号',
            field: 'entryCode',
            filterType: 'search',
            filters: [{ data: '' }],
            width: '120',
        },
        {
            title: '条目名称',
            field: 'entryName',
            filterType: 'search',
            filters: [{ data: '' }],
            minWidth: '180',
        },
        {
            title: '产品名称',
            field: 'fundNameSt',
            minWidth: '140',
        },
        {
            title: '触发阈值',
            field: 'thresholdValue',
            // render: (value, row) => this.CompareDirection[row.compareType] + '' + row.thresholdValue,
            width: '120',
        },
        {
            title: '实际值',
            field: 'calculateValue',
            width: '100',
        },
    ];
    pagingEntryDetail: PageVO = {
        currentPage: 1,
        pageSize: 25,
        total: 0,
    };
    searchParamsEntryDetail: any = {};
    async getTableDataEntryDetail() {
        let params = this.getRequestParams('risk-search');

        queryDetail({
            ...this.searchParamsEntryDetail,
            ...params,
            thresholdType: '3',
            paging: this.pagingEntryDetail,
        }).then(res => {
            this.tableDataEntryDetail = res.list;
            this.pagingEntryDetail.total = res.total;
        });
    }

    // 符号字典
    private CompareDirection = {
        '0': '>',
        '1': '<',
        '2': '>=',
        '3': '<=',
        '4': '=',
        '5': '<>',
        '6': ' ',
    };
    searchParamsScaleDetail: any = {};

    mounted() {
        isInvestmentManager().then(res => {
            this.showPublic = res;
        });
        this.getTableDataExtra();
        this.getTableDataScale();
        this.getTableDataEntryDetail();
        this.getTableDataScaleDetail();
    }

    handleCellClickScaleDetail({ column }) {
        let { property } = column;
        let range: any = {};
        if (property == 'five') {
            range.endThresholdValue = 0.05;
        } else if (property == 'fiveToSix') {
            range.startThresholdValue = 0.05;
            range.endThresholdValue = 0.06;
        } else if (property == 'sixToEight') {
            range.startThresholdValue = 0.06;
            range.endThresholdValue = 0.08;
        } else if (property == 'eightTo') {
            range = { startThresholdValue: 0.08 };
        }
        this.searchParamsScaleDetail.startThresholdValue = range.startThresholdValue;
        this.searchParamsScaleDetail.endThresholdValue = range.endThresholdValue;
        this.getTableDataScaleDetail();
    }
    // 颜色字典
    private ThresholadEntryColor = {
        '0': '#8bd197',
        '1': '#ff962c',
        '2': '#1d80ff',
        '3': '#df3a39',
        '4': '#6d5d5b',
    };

    /**
     * 按钮点击
     */
    async handleBtn(type: string) {
        if (type == 'search') {
            // this.pagingExtra.currentPage = 1;
            // this.getTableDataExtra();

            // this.getTableDataScale();

            // this.tableDataScaleDetail = [];
            this.pagingScaleDetail.currentPage = 1;
            this.pagingScaleDetail.total = 0;

            this.pagingEntryDetail.currentPage = 1;
            this.getTableDataEntryDetail();
        } else if (type == 'reset') {
            this.tableKey++;
            this.searchParamsEntryDetail = {};
            this.handleBtn('search');
        }
    }

    /**
     * 查看明细
     */
    openEntryResultDetail(type: string, row: any) {
        let currentEntryInfo: any = {
            entryCode: row.entryCode,
            row: JSON.parse(JSON.stringify(row)), // 暂时还未用到
            fundCodes: [row.fundCode],
        };
        // if (type == 'extra') {
        //     currentEntryInfo = {
        //         ...currentEntryInfo,
        //         fundCodes: [row.fundCode],
        //     };
        // } else if (type == 'scale-detail') {
        //     // 现金比例明细
        //     currentEntryInfo = {
        //         ...currentEntryInfo,
        //         fundCodes: [row.fundCode],
        //     };
        // } else if (type == 'entry-result') {
        //     currentEntryInfo = {
        //         ...currentEntryInfo,
        //         fundCodes: [row.fundCode],
        //     };
        // }
        this.dispatch('ItemRealTimeMonitoring', 'handleEntryDetail', currentEntryInfo);
    }

    // 请求参数
    getRequestParams(ref) {
        let params1 = (this.$refs as any)[ref].searchParams;
        let params = JSON.parse(JSON.stringify(params1));
        let value = params.moduleList || [];
        params.moduleList = value.includes('-1') ? [] : value;
        return params;
    }

    handleRowClick(row) {
        const msg = {
            type: 'look-entry-details',
            path: `/lookEntryDetails?entryCode=${row.entryCode}`,
            title: `条目详情-${row.entryCode}`,
        };
        top.window.postMessage(msg, '*');
    }
}
</script>
<style lang="scss" scoped>
.content {
    height: 100%;
    background: #f2f3f5;

    .el-row {
        height: calc(100% - 70px);
        display: flex;
        .report {
            background: #fff;
            display: inline-block;
            width: calc(50% - 10px);
            // background: var(--bg-color);
            height: 100%;
            border-radius: 5px;
        }
    }
    .title {
        padding-left: 10px;
        line-height: 32px;
        height: 32px;
        border-bottom: 1px solid #c8c8c8;
        .hd {
            font-size: var(--font-size-3);
            font-weight: bolder;
        }
    }

    .left-part-1,
    .left-part-2,
    .left-part-3,
    .right-part {
        > span {
            font-weight: bolder;
            font-size: 12px;
            margin-bottom: 5px;
            display: inline-block;
        }
    }

    .left-part {
        height: calc(100% - 32px);
        overflow: auto;
        > div {
            padding: 6px;
            div {
                height: calc(100% - 20px) !important;
            }
        }
        .left-part-1 {
            padding-bottom: 5px;
            border-bottom: 1px solid #ccc;

            /deep/.vxe-header--row .vxe-header--column .vxe-cell {
                display: flex;
                justify-content: center !important;
            }
        }

        .left-part-2 {
            height: 170px;
            /deep/ .vxe-body--row {
                td:nth-child(n + 2) {
                    span {
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline #409eff;
                        }
                    }
                }
            }
        }

        .left-part-3 {
            height: calc(100% - 347px);
        }
    }
    .right-part {
        height: calc(100% - 32px);
        padding: 6px;
        div {
            height: calc(100% - 20px) !important;
        }
    }
}

.text-hover {
    cursor: pointer;

    &:hover {
        color: var(--primary);
        text-decoration: var(--primary) solid underline;
    }
}
</style>
